<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }"
          >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>快三游戏</el-breadcrumb-item>
          <el-breadcrumb-item>韩国极速快三</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center">
            <el-button type="primary" @click="roomDialog = true"
            >添加房间</el-button
            >
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="room_sort" label="排序" width="60" />
          <el-table-column prop="room_name" label="房间标题" />
          <el-table-column prop="room_money" label="房间限额" />

          <el-table-column label="房间图片">
            <template #default="scope">
              <img
                  style="width: 100px; height: 30px"
                  :src="scope.row.room_imgurl"
              />
            </template>
          </el-table-column>

          <el-table-column label="房间状态">
            <template #default="scope">
              <el-tooltip
                  :content="scope.row.status == 1 ? '房间开启' : '房间关闭'"
                  placement="top"
              >
                <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="0"
                    @change="
                    adminAozhouConfigStatus(scope.row.id, scope.row.status)
                  "
                ></el-switch>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="创建时间" />

          <el-table-column label="操作操作" width="460">
            <template #default="scope">
              <el-popconfirm
                  title="确定删除房间?"
                  @confirm="adminAozhouConfigDelete(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" :icon="Delete">删除房间 </el-button>
                </template>
              </el-popconfirm>
              <el-button
                  type="success"
                  :icon="Edit"
                  @click="adminAozhouConfigUpdate(scope.row)"
              >编辑房间</el-button
              >
              <el-button
                  type="primary"
                  :icon="Setting"
                  @click="settingRedEnvelopeOdds(scope.row)"
              >赔率设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="padding: 10px"></div>

        <el-pagination
            small
            background
            layout=" prev, pager, next, jumper"
            :total="1"
        />
      </el-card>
    </el-col>
  </el-row>

  <!-- 添加管理员 -->
  <el-dialog
      v-model="roomDialog"
      title="添加房间卡"
      center
      width="38%"
      @close="roomhandleClose"
  >
    <el-form label-width="80px">
      <el-form-item label="房间名称">
        <el-input
            type="text"
            v-model="formData.room_name"
            placeholder="列如：标准厅"
        />
      </el-form-item>
      <el-form-item label="房间图片">
        <el-input
            type="text"
            v-model="formData.room_imgurl"
            disabled
            placeholder="图片尺寸要求：670*275px"
        >
          <template #append>
            <el-button @click="roomImageUpload()">请选择图片上传</el-button>
          </template>
        </el-input>

        <div style="display: flex; flex-direction: column; position: relative">
          <div
              v-if="formData.room_imgurl"
              style="
              width: 200px;
              height: 82px;
              border: solid 1px #e6e6e6;
              margin-top: 5px;
            "
          >
            <img style="width: 200px; height: 82px" :src="imageUrl" />
          </div>

          <div
              v-if="formData.room_imgurl"
              style="
              width: 20px;
              height: 20px;
              position: absolute;
              top: 5px;
              right: -20px;
            "
              @click="formData.room_imgurl = ''"
          >
            <svg
                t="1678712155966"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4668"
                width="20"
                height="20"
            >
              <path
                  d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                  fill="#d81e06"
                  p-id="4669"
              ></path>
              <path
                  d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                  fill="#d81e06"
                  p-id="4670"
              ></path>
            </svg>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="房间限额">
        <el-input
            type="number"
            v-model="formData.room_money"
            placeholder="进入房间余额要求 ：列如 1000"
        />
      </el-form-item>
      <el-form-item label="房间排序">
        <el-input
            type="number"
            v-model="formData.room_sort"
            placeholder="房间排序 由小到大展示 1-99"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" @click="roomDialog = false">取消保存</el-button>
      <el-button type="primary" @click="SubmitFormData">保存提交</el-button>
    </template>
  </el-dialog>

  <!-- 抢包规则 -->
  <el-dialog
      v-model="grabTheBagShow"
      title="房间赔率设置"
      width="50%"
      :before-close="grabTheBagClose"
  >

    <!-- 猜和值 -->
    <el-card shadow="hover">
      <template #header>
        <div style="color: blue; font-size: 16px; font-weight: 700;">
          极速韩国快三 <span style="color: red;font-size: 20px;font-weight: 700;">猜和值</span> 设置
        </div>
      </template>
      <el-form label-width="100px" label-position="top">
        <el-form-item label="猜和值赔率">
          <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
            <div style="width: 150px; margin-right: 10px; margin-top: 10px;"
                 v-for="(item) in gameData.caihezhi.list">
              <el-input type="number" v-model="item.odds">
                <template #prepend>{{ item.number }}</template>
              </el-input>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="最小下注限额">
          <el-input type="number" v-model="gameData.caihezhi.money_min"></el-input>
        </el-form-item>

        <el-form-item label="最大下注限额">
          <el-input type="number" v-model="gameData.caihezhi.money_max"></el-input>
        </el-form-item>
        <el-form-item label="本期用户最大下注限额">
          <el-input type="number" v-model="gameData.caihezhi.this_money_max"></el-input>
        </el-form-item>

      </el-form>
    </el-card>


    <!-- 猜组合 -->
    <div style="height: 20px;"></div>
    <el-card shadow="hover">
      <template #header>
        <div style="color: blue; font-size: 16px; font-weight: 700;">
          极速韩国快三 <span style="color: red;font-size: 20px;font-weight: 700;">猜组合</span> 设置
        </div>
      </template>
      <el-form label-width="100px" label-position="top">
        <el-form-item label="组合赔率">
          <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;"
                 v-for="(item) in gameData.caizuhe.list">
              <el-input type="number" v-model="item.odds">
                <template #prepend>{{ item.number }}</template>
              </el-input>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="最小下注限额">
          <el-input type="number" v-model="gameData.caizuhe.money_min"></el-input>
        </el-form-item>

        <el-form-item label="最大下注限额">
          <el-input type="number" v-model="gameData.caizuhe.money_max"></el-input>
        </el-form-item>

        <el-form-item label="本期用户最大下注限额">
          <el-input type="number" v-model="gameData.caizuhe.this_money_max"></el-input>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 猜三军 -->
    <div style="height: 20px;"></div>
    <el-card shadow="hover">
      <template #header>
        <div style="color: blue; font-size: 16px; font-weight: 700;">
          极速韩国快三 <span style="color: red;font-size: 20px;font-weight: 700;">类型</span> 设置
        </div>
      </template>
      <el-form label-width="100px" label-position="top">

        <el-form-item label="类型">
          <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;"
                 >
              <el-input type="number" v-model="gameData.sanjun.odds">
                <template #prepend>{{ gameData.sanjun.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.santonghaodanxuan.odds">
                <template #prepend>{{ gameData.santonghaodanxuan.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.ertonghaofuxuan.odds">
                <template #prepend>{{ gameData.ertonghaofuxuan.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.ertonghaodanxuan.odds">
                <template #prepend>{{ gameData.ertonghaodanxuan.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.sanbutonghao.odds">
                <template #prepend>{{ gameData.sanbutonghao.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.erbutonghao.odds">
                <template #prepend>{{ gameData.erbutonghao.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.simahei.odds">
                <template #prepend>{{ gameData.simahei.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.simahong.odds">
                <template #prepend>{{ gameData.simahong.name }}</template>
              </el-input>
            </div>
            <div style="width: 200px; margin-right: 10px; margin-top: 10px;">
              <el-input type="number" v-model="gameData.wumahhei.odds">
                <template #prepend>{{ gameData.wumahhei.name }}</template>
              </el-input>
            </div>
          </div>
        </el-form-item>

      </el-form>
    </el-card>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="grabTheBagClose">取消设置</el-button>
        <el-button type="primary" @click="grabTheBagSubmit">
          提交设置
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 抢包规则 -->
</template>

<script setup>
import { ref, reactive, onMounted, inject, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { request_post } from "@/common/axios/request.js";
import { success, error } from "@/common/tool/message.js";
const { proxy } = getCurrentInstance();
const router = useRouter();
const roomDialog = ref(false);
const imageModel = inject("showImageModel");
const imageUrl = ref(inject("imageUrl"));
const tableData = reactive({ list: [] });
let grabTheBagShow = ref(false);
const formData = reactive({
  id: null,
  room_sort: "",
  room_name: "",
  room_money: "",
  room_imgurl: "",
  room_odds: {},
  type:2
});

const gameData = reactive({
  caihezhi: {
    name: '猜和值',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null,
    list: [
      {
        number: 3,
        odds: null
      },
      {
        number: 4,
        odds: null
      },
      {
        number: 5,
        odds: null
      },
      {
        number: 6,
        odds: null
      },
      {
        number: 7,
        odds: null
      },
      {
        number: 8,
        odds: null
      },
      {
        number: 9,
        odds: null
      },
      {
        number: 10,
        odds: null
      },
      {
        number: 11,
        odds: null
      },
      {
        number: 12,
        odds: null
      },
      {
        number: 13,
        odds: null
      },
      {
        number: 14,
        odds: null
      },
      {
        number: 15,
        odds: null
      },
      {
        number: 16,
        odds: null
      },
      {
        number: 17,
        odds: null
      },
      {
        number: 18,
        odds: null
      }

    ]
  },

  caizuhe: {
    name: '猜组合',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null,
    list: [
      {
        number: '大',
        odds: null
      },
      {
        number: '小',
        odds: null
      },
      {
        number: '单',
        odds: null
      },
      {
        number: '双',
        odds: null
      },
      {
        number: '大单',
        odds: null
      },
      {
        number: '小单',
        odds: null
      },
      {
        number: '大双',
        odds: null
      },
      {
        number: '小双',
        odds: null
      },
      {
        number: '全顺',
        type: 'quanxuan',
        odds: null
      },
      {
        number: '半顺',
        type: 'banxuan',
        odds: null
      },
      {
        number: '杂',
        type: 'zha',
        odds: null
      },
      {
        number: '红码',
        type: 'hongma',
        odds: null
      },
      {
        number: '黑码',
        type: 'heima',
        odds: null
      },
      {
        number: '红单',
        type: 'hongdan',
        odds: null
      },
      {
        number: '红双',
        type: 'hongshuang',
        odds: null
      },
      {
        number: '红大',
        type: 'hongda',
        odds: null
      },
      {
        number: '红小',
        type: 'hongxiao',
        odds: null
      },
      {
        number: '黑单',
        type: 'heidan',
        odds: null
      },
      {
        number: '黑双',
        type: 'heishuang',
        odds: null
      },
      {
        number: '黑大',
        type: 'heida',
        odds: null
      },
      {
        number: '黑小',
        type: 'heixiao',
        odds: null
      },
      {
        number: '豹',
        type: 'baozi',
        odds: null
      },
    ]
  },
  sanjun:{
    name:'三军',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  santonghaodanxuan:{
    name:'三同号单选',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  ertonghaofuxuan:{
    name:'二同号复选',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  ertonghaodanxuan:{
    name:'二同号单选',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  sanbutonghao:{
    name:'三不同号',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  erbutonghao:{
    name:'二不同号',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  simahei:{
    name:'四码黑',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  simahong:{
    name:'四码红',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },
  wumahhei:{
    name:'五码黑',
    money_min: 10,
    money_max: 50000,
    this_money_max: 50000,
    odds: null
  },

})


onMounted(() => {
  adminAozhouConfigIndex();
});

function SubmitFormData() {
  adminAozhouConfigCreate();
}

// 获取配置
function adminAozhouConfigIndex() {
  request_post("k3_list",{type:2}).then((res) => {
    // console.log(res)
    if (res.data.code == 200) {
      tableData.list = res.data.data;
    } else {
      return error(res.data.msg);
    }
  });
}

// 添加配置
function adminAozhouConfigCreate() {
  request_post("k3_create", formData).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      roomDialog.value = false;
      adminAozhouConfigIndex();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 删除配置
function adminAozhouConfigDelete(id) {
  request_post("k3_delete", { id: id }).then((res) => {
    if (res.data.code == 200) {
      adminAozhouConfigIndex();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 修改状态
function adminAozhouConfigStatus(id, status) {
  request_post("k3_status", { id, status }).then((res) => {
    if (res.data.code == 200) {
      adminAozhouConfigIndex();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 修改房间状态
function adminAozhouConfigUpdate(item) {
  formData.id = item.id;
  imageUrl.value = item.room_imgurl;
  formData.room_name = item.room_name;
  formData.room_sort = item.room_sort;
  formData.room_money = item.room_money;
  formData.room_imgurl = item.room_imgurl;
  roomDialog.value = true;
}

// 设置抢包规则
const settingRedEnvelopeOdds = (item) => {
  formData.id = item.id
  if (item.room_odds) {

    gameData.caihezhi = item.room_odds.caihezhi
    gameData.caijizhi = item.room_odds.caijizhi
    gameData.caizuhe = item.room_odds.caizuhe
    gameData.sanjun = item.room_odds.sanjun
    gameData.simahong = item.room_odds.simahong
    gameData.santonghaodanxuan = item.room_odds.santonghaodanxuan
    gameData.ertonghaofuxuan = item.room_odds.ertonghaofuxuan
    gameData.ertonghaodanxuan = item.room_odds.ertonghaodanxuan

    gameData.sanbutonghao = item.room_odds.sanbutonghao
    gameData.erbutonghao = item.room_odds.erbutonghao
    gameData.simahei = item.room_odds.simahei

    gameData.wumahhei = item.room_odds.wumahhei


  }
  grabTheBagShow.value = true;
};

const grabTheBagSubmit = () => {
  formData.room_odds = gameData
  adminAozhouConfigCreate()
  grabTheBagShow.value = false
};

// 取消设置
const grabTheBagClose = () => {
  Object.assign(gameData, {
    id: null,
    minPrice: null,
    maxPrice: null,
    openRedEnvelNum: null,
    robotsReabbNum: null,
    robotBetpourTime:null,
    robotRobTime:null,
    collect:null,
  });
  grabTheBagShow.value = false;
};

// 关闭
function roomhandleClose() {
  formData.id = null;
  formData.room_sort = "";
  formData.room_name = "";
  formData.room_money = "";
  formData.room_imgurl = "";
}

function roomhandleCloses1() {
  formData.id = null;
  setTimeout(() => {
    router.go();
  }, 200);
  // clearTimeout(timer);
}

// 图片上传
function roomImageUpload() {
  imageModel();
  formData.room_imgurl = imageUrl;
}
</script>

<style></style>
